<template>
  <div>
    <detail-page
      title="打分"
      :description="headerDescription"
      :buttons="buttons"
      :loading="config.loading"
      @close="close"
    >
      <abstract-form :model="form">
        <collapse-card header="基础考核打分">
          <abstract-table :data="orgAdministrativePolicy">
            <el-table-column
              align="center"
              label="行政政策"
              prop="title"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="分数"
              prop="title"
              show-overflow-tooltip
            >
              <template v-slot="{ row }">
                <el-radio-group v-model="row.star">
                  <el-radio :label="4">优秀（4分）</el-radio>
                  <el-radio :label="3">良好（3分）</el-radio>
                  <el-radio :label="2">一般（2分）</el-radio>
                  <el-radio :label="1">较差（1分）</el-radio>
                </el-radio-group>
              </template>
            </el-table-column>
          </abstract-table>
        </collapse-card>
        <collapse-card header="量化指标打分">
          <abstract-table :data="postDetail">
            <el-table-column
              align="center"
              label="岗位明细"
              prop="title"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              label="分数"
              prop="title"
              show-overflow-tooltip
            >
              <template v-slot="{ row }">
                <el-radio-group v-model="row.star">
                  <el-radio :label="4">优秀（16分）</el-radio>
                  <el-radio :label="3">良好（12分）</el-radio>
                  <el-radio :label="2">一般（8分）</el-radio>
                  <el-radio :label="1">较差（4分）</el-radio>
                </el-radio-group>
              </template>
            </el-table-column>
          </abstract-table>
        </collapse-card>
      </abstract-form>
    </detail-page>
  </div>
</template>

<script type="text/jsx">
import DetailPage from '@/views/_common/DetailPage'
import CollapseCard from '@/components/CollapseCard'
import AbstractForm from '@/components/abstract/Form'
import AbstractTable from '@/components/abstract/Table'
import File from '@/components/File'
import config from '@/config'
import { elConfirm } from '@/utils/message'
import { closeCurrentPage } from '@/utils/route'
import { request } from '@/api/request'

export default {
  name: 'NeedToScoreMark',

  components: {
    DetailPage,
    CollapseCard,
    AbstractForm,
    AbstractTable
  },

  props: {
    id: {
      type: [String, Number],
      default: null
    }
  },

  data() {
    return {
      info: {
        orgPost_title: null,
        users_name: null,
        file: null,
        fileName: null,
        typeTitle: null,
        addTime: []
      },
      config: {
        loading: false
      },
      postDetail: [],
      orgAdministrativePolicy: [],
      form: {
        administrative: [],
        postDetail: []
      },
      options: [
        {
          label: '认真负责 - 2分',
          value: 0
        },
        {
          label: '细心 - 2分',
          value: 1
        }
      ]
    }
  },

  computed: {
    headerDescription() {
      return [
        { label: '岗位：', content: this.info.orgPost_title },
        { label: '姓名：', content: this.info.users_name },
        {
          label: '文件：',
          content: <File file={this.info.file} file-name={this.info.fileName} />
        },
        { label: '打分类型：', content: this.info.typeTitle },
        { label: '添加时间：', content: this.info.addTime }
      ]
    },
    //底部按钮
    buttons() {
      let buttons = [
        { _if: 'canCommit', type: 'primary', content: '提 交', e: this.commit }
      ]
      if (config.isDev)
        buttons.push({
          type: 'primary',
          content: '随机打分',
          e: this.randomMark
        })
      return buttons
    }
  },

  mounted() {
    this.init()
  },

  methods: {
    randomMark() {
      this.orgAdministrativePolicy.forEach(
        (e) => (e.star = Math.round(Math.random() * 3) + 1)
      )
      this.postDetail.forEach(
        (e) => (e.star = Math.round(Math.random() * 3) + 1)
      )
    },

    //获取列表页的地址
    getTablePageUrl() {
      const url = this.$route.path
      const i = url.indexOf('/mark')
      const tablePageUrl = url.substring(0, i)
      return [...tablePageUrl].join('')
    },

    //关闭页面并跳转到列表页
    close() {
      return closeCurrentPage(this.getTablePageUrl())
    },

    init() {
      this.config.loading = true
      request(
        'personal/needToScoreWorkSummary/scoring',
        { id: this.id },
        (res) => {
          res.data.five_H.forEach((e) => (e.star = null))
          res.data.five_Q.forEach((e) => (e.star = null))
          this.postDetail = res.data.five_H
          this.orgAdministrativePolicy = res.data.five_Q
          this.info.orgPost_title = res.data.info.orgPost.title
          this.info.users_name = res.data.info.users.name
          this.info.file = res.data.info.orgPostUserWorkSum.file
          this.info.fileName = res.data.info.orgPostUserWorkSum.fileName
          this.info.typeTitle = res.data.info.typeTitle
          this.info.addTime = res.data.info.orgPostUserWorkSum.addTime
        }
      ).finally(() => (this.config.loading = false))
    },

    commit() {
      if (this.config.loading) return
      let data = []
      for (let e of this.postDetail) {
        if (!e.star) return this.$message.warning(`${e.title}未评分`)
        data.push({
          tableId: e.id,
          star: e.star,
          table: 'orgPostDetail'
        })
      }
      for (let e of this.orgAdministrativePolicy) {
        if (!e.star) return this.$message.warning(`${e.title}未评分`)
        data.push({
          tableId: e.id,
          star: e.star,
          table: 'orgAdministrativePolicy'
        })
      }
      elConfirm('确认已仔细核查您的打分数据？').then(() => {
        this.config.loading = true
        request(
          'personal/needToScoreWorkSummary/scoreSubmit',
          {
            data: JSON.stringify(data),
            id: this.id
          },
          () => {
            this.$message.success('成功')
            this.close()
          }
        ).finally(() => (this.config.loading = false))
      })
    }
  }
}
</script>
